<template>
  <div>
    <a-modal v-model:open="visible" title="批量编辑图片" :footer="false">
      <a-typography-paragraph type="secondary"> * 只对当前页面的图片生效</a-typography-paragraph>
      <!--批量修改表单-->
      <a-form layout="vertical" :model="editForm" @finish="handleSubmit" class="searchForm">
        <a-form-item label="分类" name="category">
          <a-auto-complete
            v-model:value="editForm.category"
            placeholder="请输入分类"
            :options="categoryOptions"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="标签" name="tags">
          <a-select
            v-model:value="editForm.tags"
            mode="tags"
            placeholder="请输入标签，按回车确定"
            :options="tagOptions"
            allowClear
          />
        </a-form-item>
        <a-form-item name="nameRule" label="重命名规则">
          <a-input
            v-model:value="editForm.nameRule"
            placeholder="重命名规则，如:刘亦菲{序号}"
            allowClear
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%"> 提交</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { batchEditPictureUsingPost, getTagCategoryUsingGet } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'

interface Props {
  pictureList: API.PictureVO[]
  spaceId: string
  onSuccess: () => void
}

const props = withDefaults(defineProps<Props>(), {})
// 弹窗是否看邮件
const visible = ref(false)
const editForm = reactive<API.BatchEditPictureReq>({
  category: '',
  tags: [],
  nameRule: '',
})
const handleSubmit = async (values: any) => {
  if (!props.pictureList) {
    return
  }
  await batchEditPictureUsingPost({
    pictureIdList: props.pictureList.map((picture) => picture.id),
    spaceId: props.spaceId,
    ...values,
  })
  message.success('操作成功')
  closeModal()
  props.onSuccess?.()
}
const closeModal = () => {
  visible.value = false
}
const openModal = () => {
  visible.value = true
}
defineExpose({
  openModal,
})
const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])
const getTagCategoryOptions = async () => {
  const res = await getTagCategoryUsingGet()
  categoryOptions.value = (res?.data.categoryList || []).map((data: string) => {
    return {
      value: data,
      label: data,
    }
  })
  tagOptions.value = (res?.data.tagList || []).map((data: string) => {
    return {
      value: data,
      label: data,
    }
  })
}
onMounted(() => {
  getTagCategoryOptions()
})
</script>

<style scoped></style>
